<template>
	<view class="contain">
		<view class="pageInfo">
			<view class="back">
				<image src="@/static/merchantInfo/back.svg" mode="" @click="goBack"></image>
			</view>
			<view class="pageInfoBottom">
				<view class="info">
					<!-- 公司logo -->
					<view class="avatar">
						<view class="imgbox">
							<image class="img" src="@/static/LOGO.png">
							</image>
						</view>
					</view>
					<!-- 公司名称 -->
					<view class="company">
						熙喆科技
					</view>
				</view>
				<view class="shopInpo">
					店铺信息编辑
				</view>
			</view>
		</view>
		<!-- 商铺信息 -->
		<view class="shopInfos">
			<view class="shopInfosContain">
				<view class="shopInfosTop">
					<!-- 店铺logo -->
					<view class="shopInfosTopImg" @click="chooseShopsLogo(1)">
						<image :src="getImgUrl(shopList.shopsLogo)" mode="">
						</image>
					</view>
					<!-- 经营类别 -->
					<view class="category">
						<uni-data-select v-model="shopList.category" :localdata="range"
							placeholder="请选择经营类别"></uni-data-select>
					</view>
				</view>
				<view class="shopInfosBottom">
					<!-- 商家名称 -->
					<view class="shopInfosShopName">
						商家名称:<input type="text" value="" v-model="shopList.shopsName" />
					</view>
					<!--商家地址  -->
					<view class="shopInfosShopAdress">
						商家地址: <input type="text" value="" v-model="shopList.address" />
					</view>
					<view class="weixins">
						<text class="vxtext">微信号:</text>
						<scroll-view scroll-y="true">
							<view class="weixinsItems">
								<view class="weixinsItem" v-for="(item,index) in shopList.weixins" :key="index">
									<image src="../../static/merchantInfo/vxtubiao.svg" mode=""></image>
									<input type="text" :value="item" @blur="changeValue(item,$event,index)" />
									<image src="../../static/merchantInfo/delweinxin.png" mode="widthFix"
										@click="delweinxin(index)"></image>
								</view>
								<view class="weixinsItem">
									<image src="../../static/merchantInfo/vxtubiao.svg" mode=""></image>
									<view class="addtext">
										<input type="text" value="" v-model="addWechat" />
									</view>
									<image src="../../static/merchantInfo/addweinxin.png" mode="widthFix"
										@click="addweinxin"></image>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 商铺宣传图片 -->
					<scroll-view scroll-y="true">
						<view class="xcPictures">
							<view class="pictures" v-for="(item,index) in shopList.advertises" :key="index">
								<image :src="getImgUrl(item)" mode="">
								</image>
								<uni-icons type="clear" size="20" class="icon" @click="del(index)"></uni-icons>
							</view>
							<!-- 点击上传 -->
							<view class="upload" @click="upload">
								<image src="../../static/upload.png" mode=""></image>
							</view>
						</view>
					</scroll-view>
					<view class="saveEdit">
						<view class="saveEditButton" @click="save(vxIndex)">
							保存更改
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import getImgUrl from '../../utils/img.js'
	import {
		getShop,
		IndustryListApi,
		editShopList
	} from '@/api/info.js'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let shopList = ref({
		weixin: [], //微信新数组
		city: '', //市
		county: '', //县
		province: '', //省
		id: 0, //商铺id
		address: '', //详细地址
		shopsLogo: '', //门店logo
		weixins: [], //微信号
		category: '', //经营类别
		text: '', //经营类别
		advertises: [], //门店宣传图片
		uid: '' //用户ID
	})
	const vxIndex = ref() //微信号下标
	let range = ref([]) //经营类别
	//获取经营类别
	onMounted(() => {
		IndustryListApi().then(res => {
			range.value = res.data
			if (!shopList.value.shopsLogo) {
				shopList.value.shopsLogo = shopList.value.advertises[0]
			}
		})
	})
	//根据 id 获取商铺详情
	onLoad((option) => {
		shopList.value.id = Number(option.id)
		getShop({
			id: shopList.value.id
		}).then(res => {
			shopList.value = res.data
			shopList.value.weixin = shopList.value.weixins
			if (!shopList.value.shopsLogo) {
				shopList.value.shopsLogo = shopList.value.advertises[0]
			}
		})
	})

	//返回上一页
	const goBack = () => {
		uni.navigateTo({
			url: '/pages/merchantInfo/index'
		})
	}

	//选择商铺logo
	const chooseShopsLogo = (num) => {
		uni.chooseImage({
			count: 1,
			sourceType: ['album'], //从相册选择
			success: function(res) {
				const uploadFilePath = res.tempFilePaths
				let filelist = []
				// // 图片上传
				for (let i = 0; i < uploadFilePath.length; i++) {
					let obj = {}
					obj.name = "img" + i;
					obj.uri = uploadFilePath[i]
					filelist.push(obj)
				}
				uploadFile(filelist, num)
			},
			fail(err) {
				console.error('文件选择失败:', err)
			}
		})
	}
	// 编辑微信号
	const changeValue = (item, e, index) => {
		shopList.value.weixins[index] = e.detail.value
	}

	// 添加微信号
	const addWechat = ref('')
	const addweinxin = () => {
		if (addWechat.value == '') {
			uni.showToast({
				title: "添加的微信号不能为空",
				icon: "none"
			})
			return
		}
		shopList.value.weixins.push(addWechat.value)
		shopList.value.weixin = shopList.value.weixins
		addWechat.value = ''
		uni.showToast({
			title: "添加微信号成功",
			icon: "none"
		})
	}

	// 删除微信号
	const delweinxin = (index) => {
		shopList.value.weixins.splice(index, 1)
		uni.showToast({
			title: "删除微信号成功",
			icon: "none"
		})
	}

	// 添加商铺宣传图片
	const upload = () => {
		uni.chooseImage({
			count: 8,
			sourceType: ['album'], //从相册选择
			success: function(res) {
				const uploadFilePath = res.tempFilePaths
				let filelist = []
				// 图片上传
				for (let i = 0; i < uploadFilePath.length; i++) {
					let obj = {}
					obj.name = "img" + i;
					obj.uri = uploadFilePath[i]
					filelist.push(obj)
				}
				uploadFile(filelist)
			},
			fail(err) {
				console.error('文件选择失败:', err)
			}
		})
	}
	// 文件上传
	const uploadFile = (filelist, num) => {
		uni.uploadFile({
			url: getImgUrl('/front/upload/upimgs'),
			files: filelist,
			name: 'multipart',
			header: {
				'Authorization': localStorage.getItem('token')
			},
			formData: {
				'model': 'product',
				'pid': 8,
				'num': filelist.length
			},
			success(res) {
				if (num) {
					const Data = JSON.parse(res.data)
					shopList.value.shopsLogo = Data[0].fileName
					uni.showToast({
						title: "上传头像成功",
						icon: "none"
					})
				}
				if (!num) {
					const Data = JSON.parse(res.data)
					for (let i = 0; i < Data.length; i++) {
						shopList.value.advertises.push(Data[i].fileName)
					}
					uni.showToast({
						title: "上传成功",
						icon: "none"
					})
				} else if (JSON.parse(res.data)[0].code != 200) {
					uni.showToast({
						title: "上传失败",
						icon: "none"
					})
				}
			},
			fail(err) {
				console.log('上传失败', err);
			}
		})

	}

	// 删除商铺宣传图片
	const del = (index) => {
		shopList.value.advertises.splice(index, 1)
	}

	//上传商铺更改信息
	const save = () => {
		if (shopList.value.shopsName == '') {
			uni.showToast({
				title: "商家名称不能为空",
				icon: "none"
			})
			return
		}
		if (shopList.value.address == '') {
			uni.showToast({
				title: "商家地址不能为空",
				icon: "none"
			})
			return
		}
		if (!(/^[\u4e00-\u9fa5]{2,4}(省|市|区)+[\u4e00-\u9fa5]+(路|街|巷)/).test(shopList.value.address)) {
			uni.showToast({
				title: "请填写省市区精确到路的商家地址",
				icon: "none"
			})
			return
		}
		if (shopList.value.category == '') {
			uni.showToast({
				title: "经营类别不能为空",
				icon: "none"
			})
			return
		}
		if (shopList.value.weixin.length == 0) {
			uni.showToast({
				title: "微信号不能为空",
				icon: "none"
			})
			return
		}
		shopList.value.weixin = shopList.value.weixins
		shopList.value.advertise = shopList.value.advertises
		delete(shopList.value.advertises)
		delete(shopList.value.weixins)
		editShopList(shopList.value).then(res => {
			uni.showToast({
				title: "更改成功",
				icon: "none"
			})
			uni.navigateBack()
		})
	}
</script>
<style lang="scss" scoped>
	.contain {
		width: 100vw;
		height: 100vh;
		background-color: #edeff6;

		.pageInfo {
			width: 100vw;
			height: 25vh;
			background: linear-gradient(to bottom right, #9885ff, 30%, #c6d9ff);
			display: flex;
			flex-direction: column;

			//返回图标
			.back {
				width: 100%;
				height: 120rpx;
				display: flex;
				align-items: center;
				padding-left: 40rpx;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.pageInfoBottom {
				width: 100%;
				height: 150rpx;

				.info {
					width: 100vw;
					display: flex;
					padding-left: 60rpx;

					.avatar {
						width: 150rpx;
						height: 150rpx;
						border: 1rpx solid #fff;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.imgbox {
							width: 90rpx;
							height: 90rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}
					}

					// 公司名称
					.company {
						font-size: 38rpx;
						padding-left: 30rpx;
						font-weight: 600;
						display: flex;
						align-items: center;
					}
				}

				.shopInpo {
					width: 100vw;
					height: 50rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 600;
					font-size: 30rpx;
				}
			}
		}

		// 店铺信息
		.shopInfos {
			width: 100vw;
			height: 75vh;
			background-color: #edeff6;
			padding-top: 20rpx;
			display: flex;
			justify-content: center;

			.shopInfosContain {
				width: 92vw;
				height: 70vh;
				background-color: #fff;

				.shopInfosTop {
					width: 92vw;
					height: 150rpx;
					display: flex;
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 80rpx;

					// 店铺头像
					.shopInfosTopImg {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							border: 1rpx solid #c6d9ff;
						}
					}

					// 经营类别
					.category {
						background-color: #adbdf9;
						border-radius: 15rpx;
						color: #adbdf9;
					}
				}

				.shopInfosBottom {

					// 商家名称
					.shopInfosShopName {
						width: 92vw;
						height: 80rpx;
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						margin: 5rpx 0;

						input {
							width: 60vw;
							margin-left: 20rpx;
							border-bottom: 1rpx solid #DDDDDD;
						}
					}

					// 商家地址
					.shopInfosShopAdress {
						width: 92vw;
						height: 80rpx;
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						margin: 5rpx 0;

						input {
							width: 60vw;
							margin-left: 20rpx;
							border-bottom: 1rpx solid #DDDDDD;
						}
					}

					// 微信
					.weixins {
						width: 92vw;
						height: 120rpx;
						display: flex;
						padding-left: 45rpx;

						.vxtext {
							width: 130rpx;
							background-color: #fff;
						}

						// 微信号
						.weixinsItems {
							width: 500rpx;
							height: 50rpx;
							display: flex;
							flex-wrap: wrap;
							align-items: center;

							.weixinsItem {
								width: 250rpx;
								display: flex;
								align-items: center;

								image {
									width: 57rpx;
									height: 57rpx;
								}

								.addtext {
									border-radius: 25rpx;
									padding-left: 10rpx;
									border: 2rpx solid #E1E1E1;
								}
							}

						}
					}

					// 商铺宣传图片
					.xcPictures {
						width: 92vw;
						height: 360rpx;
						margin-top: 20rpx;
						padding: 0 20rpx;
						display: flex;
						flex-wrap: wrap;
						border-radius: 20rpx;

						.pictures {
							position: relative;

							image {
								width: 150rpx;
								height: 150rpx;
								border-radius: 20rpx;
								margin: 5rpx;

							}

							.icon {
								position: absolute;
								z-index: 1;
								top: 0;
								right: 0;
							}
						}

						.upload {
							width: 150rpx;
							height: 150rpx;
							margin-top: 10rpx;
							background-color: #EEEEEE;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 20rpx;

							image {
								width: 60rpx;
								height: 60rpx;
								border-radius: 20rpx;
							}
						}
					}

					// 保存更改
					.saveEdit {
						width: 92vw;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.saveEditButton {
							width: 400rpx;
							height: 80rpx;
							border-radius: 20rpx;
							border: 1rpx solid gray;
							font-size: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>